<template>
    <div class="type">
        <div class="shop-home-search">
            <van-search v-model="value" placeholder="点击前往搜索" />
        </div>

        <div class="allType">
            <div class="type_left">
                <MenuLeft ref="menuLeft" @fclick="changeType" />
            </div>

            <div class="type_right">
                <div class="type_right_t">
                    <img :src="categorytwoT.picUrl" alt="">
                    <p>{{categorytwoT.desc}}</p>
                </div>
                <ListRight ref="menuRight" />
            </div>
        </div>
    </div>
</template>

<script>
import { typeList } from '../../assets/api/typeapi.js'
import MenuLeft from './typeLeft.vue'
import ListRight from './typeRight.vue'
export default {
    components:{
        MenuLeft,
        ListRight,
    },
    data(){
        return{
            categorytwoT:[]
        }
    },
    created(){
        this.getType()
        this.changeType()
        this.getId()
    },
    methods:{ 
        getType(){
            typeList().then((r) => {
                this.$refs.menuLeft.categoryList = r.data.data.categoryList
            });
        },
        getId(id){
            typeList(id).then(r=>{
                this.$refs.menuRight.categorytwo = r.data.data.currentSubCategory
                this.categorytwoT = r.data.data.currentCategory
            })
        },
        changeType(id){
            this.getId(id)
        }
    },

}
</script>

<style lang="scss" scoped>
.type{
    .allType{
        display: flex;
        background-color: #fff;
    }
    .type_right_t{
        img{
            width: 250px;
            height: 82px;
            margin-left: 12.5px;
        }
        p{
            text-align: center;
            margin-top: 15px;
        }
    }
}
</style>